{"componentChunkName":"component---src-templates-blog-post-js","path":"/Infinite-Pomodoro-App-in-React/","result":{"data":{"site":{"siteMetadata":{"title":"Aleks Popovic - personal website and blog"}},"markdownRemark":{"id":"e0516972-c898-557e-b295-913026e33b07","excerpt":"Pomodoro is a time management technique in which you work for a set amount of time (e.g. 25 minutes), then you take a small break (e.g. 5 minutes) and then you…","html":"

Pomodoro is a time management technique in which you work for a set amount of time (e.g. 25 minutes), then you take a small break (e.g. 5 minutes) and then you repeat this cycle. In classic Pomodoro you would work for 4 cycles total and then take a longer break, but in this simplified version we are going to build a time tracker that repeats infinitely. Or, until you decide to stop working and close the browser for the day.

\n

If you prefer a video version you can watch me build this on Youtube:

\n
\n

I started a new React app by running the create-react-app command in my working folder.

\n
create-react-app pomodoro
\n

We proceed by making a new component called Pomodoro.js and importing it into our App.js.

\n
// App.js\n\nimport \"./App.css\"\nimport Pomodoro from \"./Pomodoro\"\n\nfunction App() {\n  return (\n    <div className=\"App\">\n      <Pomodoro />\n    </div>\n  )\n}\n\nexport default App
\n

Inside of our Pomodoro component we are going to add a bit of JSX for our timer and a simple message.

\n
import React, { useState, useEffect } from \"react\"\n\nexport default function Pomodoro() {\n  const [minutes, setMinutes] = useState(25)\n  const [seconds, setSeconds] = useState(0)\n  const [displayMessage, setDisplayMessage] = useState(false)\n\n  const timerMinutes = minutes < 10 ? `0${minutes}` : minutes\n  const timerSeconds = seconds < 10 ? `0${seconds}` : seconds\n\n  return (\n    <div className=\"pomodoro\">\n      <div className=\"message\">\n        {displayMessage && <div>Break time! New session starts in:</div>}\n      </div>\n      <div className=\"timer\">\n        {timerMinutes}:{timerSeconds}\n      </div>\n    </div>\n  )\n}
\n

There’s a lot of things happening in there, so let’s break it down a little bit. First, we import useState and useEffect hooks and we implement a couple of properties that utilize useState. These will be our minutes and seconds “trackers” and a boolean telling us if we should display the message during the break.

\n

We are setting starting minutes to 25 since classic pomodoro is done this way, but feel free to set a different value, or even implement some input fields for choosing the starting time.

\n

Digital clocks and timers usually show single digit numbers with a zero in front, so we are going to do that as well. Before displaying minutes and seconds we do a simple check to determine if we need to add a zero before a number.

\n

Now is a good time to set up our CSS. I chucked it all into App.css, but feel free to make a separate file and import it into our component.

\n
body {\n  background-color: #1e212d;\n  color: #eabf9f;\n  height: 100vh;\n  font-family: \"Roboto Mono\", monospace;\n}\n\n#root {\n  height: 100%;\n}\n\n.App {\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n}\n\n.pomodoro {\n  font-size: 6em;\n}\n\n.message {\n  font-size: 0.5em;\n  min-height: 1.3em;\n  margin-bottom: 0.5em;\n}
\n

Most of the CSS is used just for centering and adding some nice colors and a font. We are also changing the font size for both the timer and the message so they cover a good part of the screen.

\n

Let’s get back to the Pomodoro component and finish implementing our timer. We have a couple of use-cases that we need to cover in our useEffect hook, so let’s outline them first.

\n
useEffect(() => {\n  let interval = setInterval(() => {\n    clearInterval(interval)\n\n    if (seconds === 0) {\n      if (minutes !== 0) {\n        // seconds are 0 but minutes are not 0\n        // -> decrease minutes by 1 and reset seconds from 0 to 59\n      } else {\n        // both minutes and seconds are 0\n        // -> we start a new break timer, or reset the timer if the break finished\n      }\n    } else {\n      // seconds are not 0\n      // -> just decrease seconds by 1\n    }\n  }, 1000)\n}, [seconds])
\n

We’ve set up a useEffect hook which is tracking our seconds in the callback. When we update our seconds property, useEffect gets triggered and we immediately set a one second interval which checks what we need to do. We also need to clear the interval or we will get some nasty side-effects. React hooks are asynchronous, so our changes won’t happen exactly at the 1000th millisecond, but it’s close enough that we don’t mind.

\n

As for our use-cases, we have the simplest one where there are still seconds left on the clock in which case we just decrease seconds count by 1. If seconds are down to zero then two things can happen. We reached the end of our timer (minutes are 0) or there are still some minutes left.

\n

Here is what our implemented use-cases look like:

\n
useEffect(() => {\n  let interval = setInterval(() => {\n    clearInterval(interval)\n\n    if (seconds === 0) {\n      if (minutes !== 0) {\n        setSeconds(59)\n        setMinutes(minutes - 1)\n      } else {\n        let minutes = displayMessage ? 24 : 4\n        let seconds = 59\n\n        setSeconds(seconds)\n        setMinutes(minutes)\n        setDisplayMessage(!displayMessage)\n      }\n    } else {\n      setSeconds(seconds - 1)\n    }\n  }, 1000)\n}, [seconds])
\n

Both cases where there is still some time left are pretty self-explanatory - we either decrease the seconds, or we decrease the minutes and reset seconds to 59. For the “timer has run out” use-case we need to check if we are resetting the original timer, or are we starting a shorter break timer. We do this with our displayMessage property, because the message is only being displayed during a break.

\n

We are always setting our seconds to 59 because we don’t want to have an additional second delay between the timers, but the minutes are more interesting. If the message is currently being shown that means we were taking a break and we should reset minutes to 24. If the message is not being shown that means the original counter has ended and we need to take a break, which means starting a timer with 4 minutes.

\n

We set our minutes and seconds and switch the displayMessage boolean to its opposite value, and we are done!

\n

Here is the final Pomodoro component’s look:

\n
import React, { useState, useEffect } from \"react\"\n\nexport default function Pomodoro() {\n  const [minutes, setMinutes] = useState(25)\n  const [seconds, setSeconds] = useState(0)\n  const [displayMessage, setDisplayMessage] = useState(false)\n\n  useEffect(() => {\n    let interval = setInterval(() => {\n      clearInterval(interval)\n\n      if (seconds === 0) {\n        if (minutes !== 0) {\n          setSeconds(59)\n          setMinutes(minutes - 1)\n        } else {\n          let minutes = displayMessage ? 24 : 4\n          let seconds = 59\n\n          setSeconds(seconds)\n          setMinutes(minutes)\n          setDisplayMessage(!displayMessage)\n        }\n      } else {\n        setSeconds(seconds - 1)\n      }\n    }, 1000)\n  }, [seconds])\n\n  const timerMinutes = minutes < 10 ? `0${minutes}` : minutes\n  const timerSeconds = seconds < 10 ? `0${seconds}` : seconds\n\n  return (\n    <div className=\"pomodoro\">\n      <div className=\"message\">\n        {displayMessage && <div>Break time! New session starts in:</div>}\n      </div>\n      <div className=\"timer\">\n        {timerMinutes}:{timerSeconds}\n      </div>\n    </div>\n  )\n}
\n
\n \n
If you have any questions or comments you can reach out to me on Twitter and Instagram, where I also post interesting code tidbits and designs.\n \nI also have a YouTube channel where I regularly upload React and web dev tutorials, so if that's your cup of tea feel free to support me by subscribing.
","frontmatter":{"title":"Infinite Pomodoro App in React","series":null,"seriesLink":null,"date":"February 21, 2021","description":"Pomodoro is a time management technique in which you work for a set amount of time (e.g. 25 minutes), then you take a small break (e.g. 5 minutes) and then you repeat this cycle. In classic Pomodoro you would work for 4 cycles total and then take a longer break, but in this simplified version we are going to build a time tracker that repeats infinitely. Or, until you decide to stop working and close the browser for the day.","tags":["web","react"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACMklEQVQozz2S20uTcRzG9yeFodWNzTwtS0WNLDIKEovIAqEUkoZzi6kd1Jno1uY0fXee8927qdu0jKGpNCvp4JXmodQ06WKdyD79XNHFc/v5Pt/neVS5rmWO+dbQeFcpUz5RNLTB+egXLk8kORn7ToayS+YIZEdAHRUK/eSqeY4y50eqH77kgn2BA2HIEDoY+o3qzOgOue4VshxL5PnW0Y0v4ZlI4BbyTb2lO/Ic+5N5rLEXBCKTGNtD3G9WMN/20KsbQGt6Solrg0z5RwqqUgtQvnBX6Fslx79By2CchbkZHEqMrsA4bxIz9MkRTMos4QE/WqNMW4uCtn2CYvdmymlrS5ByaYU08Ykq2yNggx/IDe1wQtmk2jmLzhun2jHNdW+CxmCCK/559H1xGqQ4pxyrnHatU+zdRt86xgPjID16B5dsr9k3KoB77goE8LjymRL/IlLUQFN/A7aQEbvSjCXUhE66Q2ygBqm3jqDtGqO+WrT3vFgMPgH0Y9U7qbS/+wtUS4vkuJdRC+tVwUlk51liUiGz/nzG7GoeO44iPyol0HWEVwENsrUA2ayhs9FMR1NQZOmmrVkmO5AkfVgA81zvqRje4rB3i0pPRFwK0N5fj8law92emxgsdZgc9dyy6OnuqCLcdRFLYxXdwpXN4EzlVyoi2D/yr+Ui/1qq5WIxl/LQtpjNJuXhHSqiSTTDSTKCv0gL7JIuGjzk+8a5ngVudExR2/ks9WbW0Nf/sL35/AEigMrciMdEIQAAAABJRU5ErkJggg==","aspectRatio":2.6666666666666665,"src":"/static/0b5e120ab5fae721e3a3a1c4705557dd/0e6e2/pomodoro.png","srcSet":"/static/0b5e120ab5fae721e3a3a1c4705557dd/b460a/pomodoro.png 480w,\n/static/0b5e120ab5fae721e3a3a1c4705557dd/6e898/pomodoro.png 960w,\n/static/0b5e120ab5fae721e3a3a1c4705557dd/0e6e2/pomodoro.png 1920w","srcWebp":"/static/0b5e120ab5fae721e3a3a1c4705557dd/30cf3/pomodoro.webp","srcSetWebp":"/static/0b5e120ab5fae721e3a3a1c4705557dd/35871/pomodoro.webp 480w,\n/static/0b5e120ab5fae721e3a3a1c4705557dd/fcc10/pomodoro.webp 960w,\n/static/0b5e120ab5fae721e3a3a1c4705557dd/30cf3/pomodoro.webp 1920w","sizes":"(max-width: 1920px) 100vw, 1920px"}}}}}},"pageContext":{"slug":"/Infinite-Pomodoro-App-in-React/","previous":{"excerpt":"Getting a job in tech can be really hard, especially if it’s your first one. Every company prefers some experience, and how can you get…","fields":{"slug":"/How-to-get-a-job-with-no-experience/"},"frontmatter":{"date":"January 24, 2021","title":"How to get a job with no experience","series":null,"description":"Getting a job in tech can be really hard, especially if it's your first one. Every company prefers some experience, and how can you get experience if no one will take you? It's the tech version of the 'Chicken or Egg' question.","tags":["job","portfolio"],"featuredImage":{"id":"5d45bd95-f508-567e-a469-64aa4e547a33","publicURL":"/static/d198c50e0f78b5205c213040941fa7f2/indexCode.png","relativeDirectory":"How-to-get-a-job-with-no-experience","relativePath":"How-to-get-a-job-with-no-experience/indexCode.png"}}},"next":{"excerpt":"Sometimes you gotta do what you gotta do. For quite a while I’ve had this idea of making a radio player or an app which you could use to…","fields":{"slug":"/Radio-Player-App-in-React/"},"frontmatter":{"date":"March 09, 2021","title":"Radio Player App in React","series":null,"description":"Sometimes you gotta do what you gotta do. For quite a while I've had this idea of making a radio player or an app which you could use to search up or browse different radio stations, but something else always came first. The holidays, job, working on other projects, but I finally got around to doing it.","tags":["web","react"],"featuredImage":{"id":"34795a8f-328a-5a70-b319-055e7e3f80c9","publicURL":"/static/089090f649eaebf75d83fee9b0c1db68/radio.png","relativeDirectory":"Radio-Player-App-in-React","relativePath":"Radio-Player-App-in-React/radio.png"}}}}}}